<template>
  <div v-if="'seed-action' === last.type">{{ seedLabel }}</div>
  <ElSelect v-else v-model="value">
    <ElOption label="<无>" value="" />
    <ElOption v-for="(seed, seedName) in seeds" :label="seed.label" :value="seedName" :key="seedName" />
  </ElSelect>
</template>
<script setup lang="ts">
  import { ElOption, ElSelect } from 'element-plus';
  import { computed, ref, watch } from 'vue';
  import { breadcrumbs, currentApp, currentMicro } from '@/views/seed-dev';

  const props = defineProps<{microName?: string, modelValue?: string}>()
  const emits = defineEmits(['update:modelValue'])
  const last = breadcrumbs.value[breadcrumbs.value.length - 1]

  const value = ref(props.modelValue)
  watch([() => props.microName, () => props.modelValue], () => value.value = props.modelValue)
  watch(() => value.value, () => emits('update:modelValue', value.value))

  const micros = computed(() => currentApp.value?.micros || {})
  const seeds = computed(() => {
    const microName = props.microName
    if(microName) {
      return micros.value[microName].seeds
    } else {
      return currentApp.value.seeds
    }
  })

  const seedLabel = computed(() => {
    const microName = currentMicro.value
    switch(last.type) {
      case 'seed-action':
        const seedName = last.node.data.seedName
        return microName ? currentApp.value.micros[microName].seeds[seedName].label : currentApp.value.seeds[seedName].label
    }
  })
</script>